<template>
	<comRoot>
		<template #page>
			
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
			
			<comDetailNavigateBack title="系统通知"/>
			
			<view class="relative notify-page">
				<view class="notify-nav-box flex-justify-content-between">
					<view class="nav-box-left flex">
						<view class="nav-item relative flex-all-center" @click="setNotifyFun('delAll')">
							<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/notify/tab-del-bg.png`" mode=""></image>
						</view>
						<view class="nav-item relative flex-all-center" @click="setNotifyFun('readAll')">
							<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/notify/tab-read-bg.png`" mode=""></image>
						</view>
					</view>
					<view class="nav-box-right font-hanserif-bold relative">
						<view class="nav-set-box relative flex-all-center" @click="setEditFun">
							<image :class="['bg', isShowEdit ? '' : 'disabled']" 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/notify/setting-bg.png`" mode=""></image>
						</view>
					</view>
				</view>
				
				<view class="notify-tip-txt">当前未读消息<text style="color: #63FFF7;"> {{ notReadNums }} </text>条,共 {{totalNums}} 条</view>
				
				<scroll-view class="notify-content relative" scroll-y :style="{ height: 'calc(100vh - ' + commonNavHeight + ' - 162rpx)', 'padding-bottom': isShowEdit ? '180rpx' : '40rpx' }" @scrolltolower="scrolltolower" v-if="resLists && resLists.length">
					<view class="notify-list relative" v-for="(item, index) in resLists" :key="index" @click="setDetailFun(item, index)">
						<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/notify/item-bg.png`" mode=""></image>
						
						<image class="select-item absolute"
							v-if="isShowEdit" 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/notify/select.png`" 
							mode=""></image>
						<image class="select-item absolute check-select-item" 
							v-if="isShowEdit && item.checked" 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/notify/select-active.png`" 
							mode=""></image>
						
						<view class="notify-item-name relative flex-justify-content-between flex-align-items-center">
							<view class="notify-item-title relative">
								<view class="item-title-txt truncate" :class="item.type === 2 ? 'item-title-txt-active' : ''">{{item.title}}</view>
								<view class="absolute item-circle" v-if="item.status === 1"></view>
							</view>
							<image v-if="!isShowEdit" class="notify-item-more" :src="`${commonConfigs.domainFrontFileLink}/files/images/notify/arrow.png`" mode=""></image>
						</view>
						<view class="notify-item-time relative">{{item.create_time}}</view>
						<view class="notify-item-view relative mult-truncates" v-html="item.content"></view>
					</view>
					<comLoadMore :loading="loading" :showLoadendTxt="showLoadendTxt"></comLoadMore>
				</scroll-view>
				<comEmptyData v-else-if="resLists && !resLists.length && !loading"></comEmptyData>
				<comLoading style="width: 100%;height: 100%;" v-if="loading"></comLoading>
				
				<view class="notify-bottom fixed" v-if="isShowEdit">
					<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/notify/del-btn-bg.png`" mode=""></image>
					
					<view class="notify-bottom-btns margin-auto flex-all-center relative" @click="setDeleteFun">
						<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/notify/del-btn.png`" mode=""></image>
					</view>
				</view>

				<!-- <view class="maskview fixed" v-if="isShowSystemNoticeUppop">
					<view class="notify-view absolute-center font-hanserif-bold">
						<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/notify/message.png`" mode=""></image>
						<view class="notify-txt flex-all-center absolute">{{ operTxt }}</view>
						<view class="cancel-txt-btn flex-all-center absolute" @click="setCancelFun">取消</view>
						<view class="sure-txt-btn flex-all-center absolute" @click="setSureFun">确定</view>
					</view>
				</view> -->
				
				<comPromptPopup 
					v-model="isShowSystemNoticeUppop"
					:content="operTxt" 
					cancelText="取消" 
					confirmText="确定" 
					@setSureFun="setSureFun" />
				
			</view>
		</template>
	</comRoot>
</template>

<script>
	import store from '@/store';
	import paging from '@/inmixed/paging.mixin.js';
	import { getEmailIndexApi, getEmailUpdateApi } from '@/setupproject/INTERFACE';
	
	export default {
		mixins: [paging],
		name: 'notifyPage',
		data() {
			return {
				selectedIds: [],
				currentParam: {
					id: ''
				},
				operTxt: '',
				notReadNums: 0,
				totalNums: 0,
				loading: true,
				isShowEdit: false,
				isShowSystemNoticeUppop: false,
			};
		},
		onLoad() {
			
		},
		onShow() {

		},
		onHide() {
			
		},
		watch: {
			
		},
		computed: {
			showLoadendTxt() {
				return this.isShowPageLoadedTxt && !this.loading && this.resLists.length ? true : false;
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
		},
		methods: {
			async listsGetFun() {
				this.loading = true;
			
				const { data, code, msg } = await getEmailIndexApi();
				setTimeout(() => { this.loading = false }, 0);
				
				if (code !== 200) {
					return uni.showToast({ title: msg, icon: 'none' });
				}
				
				this.totalNums = data.total;
				this.notReadNums = data.not_red_count;
				data.count = data.total;
				data.resLists = data.rows;
				
				data.resLists.map(item => {
					item.checked = false;
				})
				return data;
			},
			
			setDetailFun(item, index) {
				if(this.isShowEdit) {
					this.resLists[index].checked = !this.resLists[index].checked;
					
					if (item.checked) {
						this.selectedIds.push(item.id);
					} else {
						const currentId = this.selectedIds.findIndex((currentItem) => currentItem === item.id);
						this.selectedIds.splice(currentId, 1);
					}
					this.$forceUpdate();
				} else {
					this.resLists[index].status = 2;
					uni.navigateTo({
						url: `/secondary/notifyDetailPage/notifyDetailPage?id=${item.id}`
					});
				}
			},
			
			setNotifyFun(type) {
				if(!this.totalNums) return;
				
				if(this.isShowEdit && type !== 'delCurrent') return;
				
				this.currentParam = {
					id: ''
				}
				if(type === 'delAll') {
					this.operTxt = '是否一键删除所有系统通知？';
					this.currentParam = {
						is_delete: 1
					};
				}else if(type === 'readAll') {
					this.operTxt = '是否一键已读所有系统通知？';
				}else if(type === 'delCurrent') {
					this.currentParam = {
						is_delete: 1,
						id: this.selectedIds
					};
					this.operTxt = '是否删除所选择系统通知？';
				}
				this.isShowSystemNoticeUppop = true;
			},
			
			seTInitFun() {
				this.resLists = [];
				this.pagingInitFun();
				this.resListsGetFun();
			},
			
			setDeleteFun() {
				this.setNotifyFun('delCurrent')
			},
			
			setSureFun() {
				this.isShowSystemNoticeUppop = false;
				this.isShowEdit = false;
				this.getEmailUpdateApi();
			},
			
			async getEmailUpdateApi() {
				const { data, code, msg } = await getEmailUpdateApi(this.currentParam);
				if (code !== 200) {
					return uni.showToast({ title: msg, icon: 'none' });
				}
				this.seTInitFun();
			},
			
			setEditFun() {
				if(!this.totalNums) return;
				
				this.isShowEdit = !this.isShowEdit;
				if(this.isShowEdit) {
				}
			},
			
			setCancelFun() {
				this.isShowSystemNoticeUppop = false;
			},
		}
	};
</script>

<style lang="scss" scoped>
	.notify-page {
		color: #111111;
		padding: 22rpx;
		font-size: 26rpx;
		.notify-nav-box {
			width: 100%;
			padding: 0 0 26rpx;
			.nav-box-left {
				.nav-item {
					width: 180rpx;
					height: 64rpx;
				}
				.nav-item + .nav-item {
					margin-left: 18rpx;
				}
			}
			.nav-box-right {
				font-size: 30rpx;
				top: 10rpx;
				.nav-set-box {
					width: 104rpx;
					height: 40rpx;
					.disabled {
						filter: grayscale(90%);
						-webkit-filter: grayscale(90%);
						-moz-filter: grayscale(90%);
						-ms-filter: grayscale(90%);
						-o-filter: grayscale(90%);
					}
				}
			}
		}
		.notify-tip-txt {
			height: 26rpx;
			line-height: 26rpx;
			margin-bottom: 30rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}
		.notify-content {
			overflow-y: auto;
			.notify-list {
				width: 686rpx;
				padding: 34rpx 24rpx 0;
				margin-bottom: 24rpx;
				height: 262rpx;
				.select-item {
					z-index: 10;
					top: 34rpx;
					right: 24rpx;
					width: 24rpx;
					height: 24rpx;
					
					&.check-select-item {
						width: 16rpx;
						height: 14rpx;
						top: 38rpx;
						right: 28rpx;
					}
				}
				.notify-item-name {
					font-size: 32rpx;
					color: #FFFFFF;
					.notify-item-title {
						height: 36rpx;
						line-height: 36rpx;
						max-width: 540rpx;
						.item-title-txt {
							width: 100%;
							color: #FFFFFF;
							&.item-title-txt-active {
								color: #FFFFFF;
							}
						}
						.item-circle {
							background: #63FFF7;
							border-radius: 100%;
							top: 0;
							bottom: 0;
							right: -20rpx;
							margin: auto;
							width: 16rpx;
							height: 16rpx;
						}
					}
					.notify-item-more {
						width: 38rpx;
						height: 32rpx;
					}
				}
				.notify-item-time {
					color: #FFFFFF;
					font-size: 24rpx;
					margin: 12rpx 0 14rpx;
					height: 28rpx;
					line-height: 28rpx;
				}
				.notify-item-view {
					color: #FFFFFF;
					padding-top: 22rpx;
					height: 100rpx;
					line-height: 38rpx;
					text-align: justify;
					font-size: 24rpx;
					border-top: 1rpx solid #DBE0E9;
					box-sizing: border-box;
				}
			}
		}
		.notify-bottom {
			width: 100%;
			height: 172rpx;
			left: 0;
			bottom: 0;
			.notify-bottom-btns {
				color: #fff;
				height: 76rpx;
				margin-top: 40rpx;
				width: 512rpx;
				font-size: 38rpx;
			}
		}
	}
	
	.maskview {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.78);
		overflow: hidden;
		top: 0;
		left: 0;
		z-index: 1000;
		color: #fff;
		.notify-view {
			font-size: 36rpx;
			width: 621rpx;
			height: 334rpx;
			.notify-txt {
				width: 100%;
				height: 182rpx;
				overflow-y: auto;
				text-align: justify;
				font-size: 34rpx;
				color: rgba(58, 25, 0, 1);
				left: 12rpx;
				top: 30rpx;
			}
			.cancel-txt-btn {
				color: rgba(115, 115, 115, 1);
				width: 50%;
				height: 92rpx;
				left: 14rpx;
				bottom: 26rpx;
			}
			.sure-txt-btn {
				color: rgba(254, 112, 0, 1);
				width: 50%;
				height: 92rpx;
				right: 14rpx;
				bottom: 26rpx;
			}
		}
	}
</style>
